<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.bs-glyphicons {
	margin: 5px;
	overflow: hidden;
}

.bs-glyphicons-list {
	padding-left: 0;
	list-style: none;
}

.bs-glyphicons li {
    width: 33%;
	cursor:pointer;
	float: left;
    padding: 10px;
    font-size: 15px;
    line-height: 1.5;
	text-align: center;
	background-color: #f9f9f9;
	border: 1px solid #fff;
}
.bs-glyphicons li span{
    display: block;
}

.bs-glyphicons li:hover {
    color: #fff;
    background-color: #563d7c;
}

.bs-glyphicons .glyphicon-class {
	display: block;
	text-align: center;
	word-wrap: break-word;
}
</style>
</head>
<body>
	<div class="default-padding container-fluid">
		<div class="page-header">
		  <h3>选择角色，角色将被赋予到用户上，用于控制后台菜单的可见性</h3>
		</div>
		<div class="bs-glyphicons">
			<ul class="bs-glyphicons-list">
		    	<li roleType="ROLE_ADMIN" roleName="超级管理员">
		    		<span>超级管理员</span>
		    		<img width="100px" src="<%=request.getContextPath()%>/admin/modal/roleImage/admin.jpg"/>
		    	</li>
		    	<li roleType="ROLE_MANAGER"  roleName="系统管理员">
		    		<span>系统管理员</span>
		    		<img width="100px" src="<%=request.getContextPath()%>/admin/modal/roleImage/manager.jpg"/>
		    	</li>
		    	<li roleType="ROLE_USER" roleName="普通用户">
		    		<span>普通用户</span>
		    		<img width="100px" src="<%=request.getContextPath()%>/admin/modal/roleImage/user.jpg"/>
		    	</li>
			</ul>
		</div>
	</div>
	<script type="text/javascript">
	$(".bs-glyphicons-list li").click(function(){
		var roleType = $(this).attr("roleType");
		var nailName = $(this).attr("roleName");
		$("#roleType").val(roleType);
		$("#iconShow").html(nailName);
		$('#myModal').modal('hide');
	});
	</script>
</body>
</html>